import { Button, Statistic, Tooltip,AutoComplete, message, Row, Col, Card, Input, Form, InputNumber } from 'antd';
import React, {
  useState,
  useRef,
  useEffect
} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, {
  ProColumns,
  ActionType
} from '@ant-design/pro-table';
import ProCard from '@ant-design/pro-card';
import { useHistory } from "react-router-dom";
import { queryRule,selectActivity, selectTeacher,queryInfo} from './service';
const { Option } = AutoComplete;
const TableList: React.FC<{}> = () => {
  const [activityId, setActivityId] = useState<any>()
  const [options, setOptions] = useState<{ value: string }[]>([]);
  const onSelect = (value: any, option: any) => {
    setActivityId(option.key)
  };
  const onSearch = async (key: string) => {
    let data = await selectActivity({ key})
    let options = !key ? [] : data.data.map((item: { activityId: any; activityName: any; }) => ({id: item.activityId, label: item.activityName, value: item.activityId}))
    setOptions(options);
  };
  const [form] = Form.useForm();
  const onFinish = () => {
    let param = form.getFieldsValue();
    let _activityId = activityId ? activityId : param.activityId
    if (!_activityId) {
      message.error('活动ID不能为空')
      return
    }
    window.open('/web/teacher-admin/quiz/task-detail?activityId='+_activityId)
  }
  const onReset = () => {
    form.resetFields();
    setActivityId()
  };
  return (
    <PageContainer>
      <Card style={{'marginBottom':'0'}}>
        <Form form={form} onFinish={onFinish} >
          <Row gutter={[16,16]} >
          <Col span={8} >
             <Form.Item
              name="activityId"
              label="课程ID"
              >
              <InputNumber placeholder="请输入" min={0} style={{ width: '100%' }}/>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="课程名称" name="key" >
              <AutoComplete
                onSelect={onSelect}
                onSearch={onSearch}
                placeholder="请选择"
                onChange={(value) => {
                  if (!value) {
                    setActivityId()
                  }
                }}
              >
                {options.map((item) => (
                  <Option key={item.id}  label={item.label} value={item.label}>
                    {item.label}
                  </Option>
                ))}
              </AutoComplete>
            </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item style={{textAlign: 'right'}}>
                <Button type="primary" htmlType="submit" style={{marginRight:'10px'} }>
                  查询
                </Button>
                <Button htmlType="button" onClick={onReset}>
                  重置
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
    </PageContainer>
  );
};

export default TableList;
